<template>
  <div class="outer">
    <el-input
      type="text"
      v-model="inpVal"
      placeholder="姓名/手机"
      style="width: 200px"
    ></el-input>

    <span style="margin: 0 20px">创建时间:</span>
    <el-date-picker
      v-model="dateVal"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']"
      style="width: 400px"
    >
    </el-date-picker>
    <el-button type="primary" icon="el-icon-search" style="margin: 0 20px" @click="searchUserHD"
      >查询</el-button
    >
    <el-button style="margin-bottom: 20px" @click="resetUserHD" >清空</el-button>

    <el-table v-loading='isLoading' :data="userInfoList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="phone" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="{ row }">
          <span>{{ row.status === 1 ? "正常" : "不正常" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="authStatus" label="认证状态">
        <template v-slot="{ row }">
          <span>{{
            row.authStatus === 0
              ? "未认证"
              : row.authStatus === 1
              ? "认证中"
              : "认证成功"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot="{ row }">
          <el-button type="success" @click="toShowHD(row)">查看</el-button>
          <el-button :disabled="!$hasBP('btn.User.locking')">锁定</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top:20px" :current-page.sync='page' :page-size.sync='limit'  background layout="prev, pager, next, ->, sizes,total" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { reqUserInfoHD } from "@/api/userInfo";
export default {
  name: "UserInfo",
  data() {
    return {
      inpVal: "",
      dateVal: "",
      page: 1,
      limit: 10,
      total: 0,
      userInfoList: [],
      isLoading:false
    };
  },
  mounted() {
    // 初始化数据
    this.getUserInfoListHD();
  },
  methods: {
    // 1.获取会员分页数据
    async getUserInfoListHD() {
      this.isLoading = true
      try {
        const res = await reqUserInfoHD(this.page,this.limit,this.inpVal,this.dateVal[0],this.dateVal[1]);
        // console.log(res);
        this.total = res.data.total;
        this.userInfoList = res.data.records;
        this.isLoading = false
      } catch (error) {
        this.isLoading = false
      }
    },
    // 2.去查看
    toShowHD(row) {
      // console.log("row", row);
      this.$router.push({
        name:'Show',
        query:{
          id:row.id,
          form:this.$route.name
        }
      })
    },
    // 3.搜索功能
    searchUserHD(){
      // console.log(this.inpVal);
      // console.log(this.dateVal);

      this.getUserInfoListHD()
    },
    // 4.清空功能
    resetUserHD(){
      this.inpVal= "",
      this.dateVal= "",
      this.page=1,
      this.limit=10,
      this.getUserInfoListHD()
    },
  },
  watch:{
    pageList:{
      immediate:true,
      deep:true,
      handler(){
        this.getUserInfoListHD()
      }
    }
  },
  computed: {
    pageList(){
      return {page:this.page,limit:this.limit}
    }
  },
};
</script>

<style scoped>
.outer {
  padding: 24px;
}
</style>
